<!-- eslint-disable prettier/prettier -->
<template>
  <div class="login_container">
    <div class="login-content">
      <div class="login-title">
        <div class="logo-bg"></div>
      </div>
      <el-form :model="loginForm" ref="loginFormRef" :rules="rules" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
        <el-form-item label="" name="username">
          <el-input size="large" v-model:value="loginForm.username" placeholder="请输入登录账号" @keyup.enter="onLogin">
            <template #prefix>
              <SvgIcon name="login-account" width="18" height="18" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="" name="password">
          <el-input-password size="large" v-model:value="loginForm.password" placeholder="请输入密码" @keyup.enter="onLogin">
            <template #prefix>
              <SvgIcon name="password" width="18" height="18" />
            </template>
          </el-input-password>
        </el-form-item>
      </el-form>
      <el-button size="large" class="w-full login-btn" type="primary" @click="onLogin" @keyup.enter="onLogin" :disabled="isLogining"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script setup>
  import { ElMessage } from 'element-plus';
  import useUserStore from '@/store/modules/user';
  import { encryptText } from '@/utils';
  // 表单
  const loginForm = reactive({
    username: '',
    password: '',
  });
  const rules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'change' }],
    password: [{ required: true, message: '请输入密码', trigger: 'change' }],
  };

  const $router = useRouter();
  const $route = useRoute();
  const isLogining = ref(false);
  const loginFormRef = ref();
  const useStore = useUserStore();
  const uuid = '';
  const onLogin = async () => {
    const validateLogin = await loginFormRef.value.validate();
    if (!validateLogin) return;
    isLogining.value = true;
    try {
      const encryptPwd = await encryptText(loginForm.password);
      const params = {
        data: {
          password: encryptPwd,
          username: loginForm.username,
          uuid,
        },
      };
      await useStore.userLogin(params);
      //返回码为200
      //编程式导航跳转到展示数据首页
      //判断登录的时候,路由路径当中是否有query参数，如果有就往query参数挑战，没有跳转到首页
      const redirect = $route.query.redirect;
      $router.push({ path: redirect || '/' });
      ElMessage({
        message: '登录成功',
        type: 'success',
      });
      setTimeout(() => {
        isLogining.value = false;
      }, 500);
    } catch (error) {
      ElMessage.error(`登录失败，${error.message ? error.message : '请检查登录信息'}`);
      isLogining.value = false;
    }
  };
</script>

<style scoped lang="scss">
  .login_container {
    background: url('@/assets/images/login-bg.png'), url('@/assets/images/login-bg.jpg'), url('@/assets/images/login-bg.svg');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    transition: none;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;

    .login-content {
      padding: 80px 56px 100px;
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(15px);
      box-shadow: 0px 4px 4px 0px #00000040;
      border-radius: 10px;
      width: 542px;
      margin-top: 10%;

      .login-title {
        display: flex;
        justify-content: center;
        margin-bottom: 47px;
        .logo-bg {
          width: 380px;
          height: 50px;
          background: url('@/assets/images/login-logo.png') no-repeat, url('@/assets/images/login-logo.jpg') no-repeat,
            url('@/assets/images/login-logo.svg') no-repeat;
          background-size: contain;
        }
      }

      .verify-code {
        :deep(.el-form-item-control-input-content) {
          display: flex;
          justify-content: space-between;

          .el-input-affix-wrapper {
            flex: 1;
          }

          .verify-code-img {
            cursor: pointer;
            border-radius: 4px;
            width: 116px;
            height: 44px;
            margin-left: 12px;
          }
        }
      }

      .login-btn {
        height: 64px;
        font-size: 24px;
      }
    }
  }

  :deep(.el-form-item) {
    margin-bottom: 36px;

    .el-input-prefix {
      margin-right: 12px;
    }

    .el-input {
      height: 28px;
    }
  }

  @media screen and (max-height: 680px) {
    .login_container {
      .login-content {
        margin-top: 5vh;
      }
    }
  }
</style>
